<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue3</title>
  <link rel="stylesheet" type="text/css" href="../css/drawer.css">
  <link rel="stylesheet" href="../lib/element-plus@2.8.4/index.css" />
</head>
<body>
  <script type="importmap">
    {
      "imports": {
        "vue": "../lib/vue@3.5.10/vue.esm-browser.js"
      }
    }
  </script>
  <div id="app">
  </div>
  <script type="module">
    import { createApp, ref } from '../lib/vue@3.5.10/vue.esm-browser.js'
    import ArrowDrawer from "../component/ArrowDrawer.js";
    import {ElMessage, ElButton, ElSlider, ElColorPicker, ElDrawer} from "../lib/element-plus@2.8.4/index.full.min.mjs";
    import {Edit} from "../lib/@element-plus/icons-vue@2.3.1/index.js";

    const tianDiTuTk = '254a86978efe81b7e7523fe3321fbbae'
    // specifyCode: 城市国标码 / 	省国标码
    function queryGeocodeTianDiTu(queryText, output = [], specifyCode = -1) {
      const param = {
        "queryType":"1",
        "start":0,
        "mapBound":"61.1796875,0.05793129855838686,149.07031250000034,53.66180987844831",
        // "yingjiType":0,
        // "queryTerminal":10000,
        "level":3,
        "keyWord": queryText,
        "count":10,
        // "sourceType":0,
        // "specify":156420500
      }
      if (specifyCode > 0) {
        param.specify = specifyCode
      }
      const geoUrl = `https://api.tianditu.gov.cn/v2/search?type=query&postStr=${JSON.stringify(param)}&tk=${tianDiTuTk}`
      fetch(geoUrl, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      }).then(res => {
        if (res.ok) {
          return res.json()
        } else {
          throw new Error('test fetch cesium geocode error')
        }
      }).then(json => {
        if (json.pois) {
          const infos = json.pois.map(it => {
            return {name: it.name, lonlat: it.lonlat, address: it.address}
          })
          output.push(...infos)
          console.log('查询天地图: ', output)
        } else if (json.statistics && json.statistics.priorityCitys) {
          json.statistics.priorityCitys.forEach(item => {
            queryGeocodeTianDiTu(queryText, output, item.adminCode)
          })
        }
        console.log('queryGeocodeTianDiTu: ', json)
        // cb(results)
      })
    }
    const output = []
    queryGeocodeTianDiTu('湖北龙潭河大桥', output)
    // queryGeocodeTianDiTu('成都抚琴小区东北路1号', output)
    // console.log('查询天地图: ', output)
    
    const app = createApp({
      // `setup` 是一个特殊的钩子，专门用于组合式 API。
      setup() {
        const visi = ref(true)
        const setVisi = (value) => {
          visi.value = value
        }
        const value = ref([4, 48])
        const color = ref('rgba(255, 69, 0, 0.68)')
        const predefineColors = ref([
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577',
        ])
        const handle = () => {
          ElMessage({
            message: '点击！',
            type: 'success',
          })
        }
        return {
          handle,
          visi,
          setVisi,
          value,
          color,
          predefineColors,
          Edit,
        }
      },
      template: `
  <div>
    <ArrowDrawer
      :visible="visi"
      title="abc"
      :width="300"
      @update:visible="setVisi"
    >
      <button>hello</button>
      <br>
      <input type="color"/><br>
      <el-button :icon="Edit" type="primary" @click="handle">提示</el-button>
      <el-slider v-model="value" range show-stops :max="180" />
      <el-color-picker v-model="color" show-alpha :predefine="predefineColors" />
      <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
        open
      </el-button>
      <el-button type="primary" style="margin-left: 16px" @click="drawer = false">
        close
      </el-button>
    </ArrowDrawer>
  </div>`
    })
    app.component('ArrowDrawer', ArrowDrawer)
    app.component('ElButton', ElButton)
    app.component('el-slider', ElSlider)
    app.component('ElColorPicker', ElColorPicker)
    app.component('ElDrawer', ElDrawer)
    app.mount('#app')

  </script>
</body>
</html>
